<template>
	<view class="login">
		<u--form labelPosition="top" labelWidth="70" :model="form" :rules="rules" errorType="toast" ref="uForm"
			:labelStyle="{color:'#000',fontWeight:'600'}">
			<u-form-item prop="password">
				<view class="label">新密码</view>
				<Input :islabel="false" name="请输入密码" type="password" v-model="form.password" />
			</u-form-item>
			<u-form-item prop="repassword">
				<view class="label">确认新密码</view>
				<Input :islabel="false" name="请确认密码" type="password" v-model="form.repassword" />
			</u-form-item>
			<u-form-item prop="username">
				<!-- <Input name="手机号" type="number" v-model="form.username"/> -->
				<view class="label">手机号</view>
				<view class="num">{{userInfo.mobile|formatMobile}}<u-icon name="lock-fill" color="#8D93AA" size="18"></u-icon></view>
			</u-form-item>
			<u-form-item prop="verify_code">
				<view class="label">验证码</view>
				<VerifyCode :islabel="false" name="请输入验证码" :username="form.username" v-model="form.verify_code">
				</VerifyCode>
			</u-form-item>
		</u--form>
		<view class="submit" @click="submit">确定</view>
		<tf-verify-img @succeed="chenggong" @close="showVerify = false" v-if="showVerify"></tf-verify-img>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Input from '@/components/Input.vue'
	import VerifyCode from '@/components/verifycode.vue'
	import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
	export default {
		mixins: [mixin],
		components: {
			Input,
			VerifyCode,
			tfVerifyImg
		},
		data() {
			return {
				showVerify: false,
				btntxt: '获取验证码',
				wait: true,
				djsnum: 60,
				btm: false,
				showTel: false,
				show: false,
				loading: false,
				session_key: '',
				openid: '',
				userinfo: {},
				form: {
					username: '', //账号
					verify_code: '', //验证码
					password: '', //密码
					repassword: '',
				},
				rules: {
					username: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					verify_code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								let regex = /^(?=.*\d)(?=.*?[a-zA-Z])(?=.*?[\W_]).{8,16}$/
								return regex.test(value);
							},
							message: '密码包含字母、数字、特殊符号，长度大于等于8',
							trigger: ['change', 'blur'],
						}
					],
					repassword: [{
							required: true,
							message: '请再次输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (value === this.form.password) {
									return true
								} else {
									return false
								}
							},
							message: '两次密码不相同',
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		onReady() {
			// this.toweichat()
		},
		onLoad() {

		},
		onShow() {
			this.form.username = this.userInfo.mobile
		},
		filters: {
			formatMobile(e) {
				if (e) {
					var reg = /^(\d{3})\d*(\d{4})$/;
					return e.replace(reg, '$1****$2')
				}
			}
		},
		computed: {
			...mapState(['userInfo', 'token']),
			disabled() {
				if (this.form.username && this.form.password && this.form.repassword) {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.setPassword()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			chenggong() {
				// uni.showToast({
				//     title: '验证成功'
				// });
				this._getCode()
				this.showVerify = false;
			},
			getCode() { //点击获取验证码
				if (this.userInfo.mobile != '' && this.wait == true) {
					this.showVerify = true
				} else {
					uni.$u.toast('请不要连续点击');
				}

			},
			_getCode() {
				this.$http({
					url: this.$api.shayuSms,
					method: 'POST',
					hideLoading: true,
					data: {
						username: this.userInfo.mobile
					}
				}).then((res) => { //请求接口
					if (res.code == 200) {
						this.timer(); //成功后倒计时
					}
				})
			},
			//发送手机验证码倒计时
			timer() {
				if (this.djsnum > 0) {
					this.wait = false;
					this.djsnum--;
					this.btntxt = this.djsnum + "秒";
					setTimeout(this.timer, 1000);
				} else {
					this.djsnum = 60;
					this.btntxt = "发送验证码";
					this.wait = true;
				}
			},
			login() {
				// console.log(this.pact)			
			},

			//重置密码
			async setPassword() {
				this.codeShow = false
				this.loading = true
				let data = await this.$http({
					url: this.$api.setPassword,
					method: 'POST',
					hideLoading: true,
					data: this.form
				})
				console.log('[重置密码]', data)
				this.loading = false
				if (data.code == 200) {
					this.$store.commit('ChangeUserInfo', {});
					this.$store.commit('ChangeToken', '');
					uni.$u.toast(data.msg);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/Index/index'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: data.msg || '重置密码失败',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		// min-height: 100vh;
		padding: 0rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #FFF;
		display: flex;
		// align-items: center;
		flex-direction: column;

		// justify-content: space-between;
		::v-deep .code {
			.u-button {
				background-color: transparent !important;
				font-size: 30rpx;
				font-weight: 400;
				color: #000;
				width: auto;
				padding: 0;
			}
		}
		
		::v-deep .Ginput {
			border-bottom: 0 !important;
			.u-input {
				border: 0;
			}
		}
		
		::v-deep.u-button__text {
			color: #468EFF;
		}
		
		.u-form-item {
			display: flex;
			border-bottom: 1rpx solid #EBEEF5;
			&:last-child {
				border: 0;
			}
			.label {
				width: 240rpx;
			}
			::v-deep.input {
				text-align: right;
			}
			::v-deep.uni-input-input {
				text-align: right;
			}
			.uni-input-placeholder {
				text-align: right;
			}
		}

		.getcode {
			font-size: 13px;
			font-weight: 400;
			color: #F2E0BC;
			line-height: 18px;
			width: 180rpx;
			// border-bottom: 1px solid #f5f5f5 !important;
			height: 104rpx;
			line-height: 104rpx;
			text-align: right;
		}

		.num {
			width: 100%;
			height: 68rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			// border-bottom: 1px solid #f5f5f5 !important;
			color: #000;
		}

		::v-deep .u-form-item__body {
			padding: 20rpx 0;
			border-bottom: none;
		}

		.Ginput {
			// border-bottom: 1rpx solid #f5f5f5 !important;
		}

		.u-input {
			// border-bottom: 1rpx solid #f5f5f5 !important;
		}

		.submit {
			margin-top: 70rpx;
			border: 0;
			height: 80rpx;
			background: #468EFF;
			border-radius: 4rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFF;
			line-height: 80rpx;
			text-align: center;
			// &.u-button--disabled{
			// 	opacity: 1;
			// 	color: #979797;
			// 	background: #252525;
			// }
		}
	}
</style>
